<!--
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <slot :options="options" :labels="labels">{{ labels.join(joiner) }}</slot>
</template>

<script lang="ts" setup>
import {computed, ref, watch} from "vue";
import {getDicts} from "@/api/common";
import {getLabels} from "@/soar/utils/data";

const props = defineProps<{
  /**
   * 字典code
   */
  code: string;

  /**
   * 字典值
   */
  value: string|number|string[]|[number];

  /**
   * 连接符
   */
  joiner: string;
}>()

const options = ref<any>([]);

watch(
    () => props.code,
    (v) => {
      if (v) {
        getDicts(props.code).then((res: any) => {
          options.value = res.data[v];
        })
      }
    },
    { immediate: true }
)

const labels = computed(() => {
  return getLabels(options.value, props.value)
})
</script>

<script lang="ts">
export default {
  name: 'LgDict',
};
</script>
